<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <p>
    <input id="user" type="text">
    <span id="user_span"></span>
  </p>
  <p><input type="button" id="btn" value="注册"></p>
</body>
<script>
  // 用户名注册验证要求
  // 由数字 大小写字母 下划线 组成 6-12位, 且不能以数字开头 不能含有非法字符

  // 1. 由数字 大小写字母 下划线 组成(不能含有非法字符)
  // 2. 6-12位
  // 3. 不能以数字开头

  // 按照从易到难的顺序
  // a. 6-12位
  // b. 验证开头(不能以数字开头)


  // 非法字符(数字 大小写字母 下划线 以外的字符)

  // 1. JS操作元素之前必须先获取元素
  var userInp = document.getElementById("user");
  var userSpan = document.getElementById("user_span");
  var btn = document.getElementById("btn");

  // 2. 绑定点击事件  =>
  btn.onclick = function () {
    // 3. 点击取值
    var user = userInp.value;  //表单元素的取值(字符串)
    console.log(user);

    if (user.length >= 6 && user.length <= 12) {
      // userSpan.innerText = "√";
      // userSpan.style.fontSize = "12px";
      // userSpan.style.color = "green";

      var firstChar = user.charAt(0); // 取第一个字符
      // 1. 获取第一个字符对应的ascii编码(48-57 是数字) 否则 不是数字
      // 2. 创建一个纯数字数组  ["1","2","3"...."9"]  =>  判断在数组中是否存在  
      // 3. isNaN()


    } else {
      userSpan.innerText = "用户名需要在6-12位之间";
      userSpan.style.fontSize = "12px";
      userSpan.style.color = "red";
    }

  }


  //  innerText   获取和设置非表单元素(div span ul)的文本内容
  //  innerHTML   获取和设置非表单元素的html结构

  // JS操作元素改变样式时,都是通过内联style实现的






</script>

</html>